<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
	<div id="app"></div>
	<div id="timer"></div>
	<div id="root"></div>
	<div id="time"></div>
	<script src="react.js"></script>
	<script src="react-dom.js"></script>
	<script src="browser.min.js"></script>
	
    <script type="text/babel">
        var MessageBox = React.createClass({
			alertMe: function(){
				alert('你刚才点了我一下。。。。');
			},
			render:function(){
				return ( <h1 onClick={this.alertMe}>你好世界！！！</h1> )
			}
		});

		ReactDOM.render( <MessageBox/>, 
			document.getElementById('app'),
			function(){
				console.log('渲染完成啦！！');
			}
		)
		class Timer extends React.Component {
				constructor(props) {
				super(props);
				this.state = { seconds: 0 };
				}

				tick() {
				this.setState(prevState => ({
					seconds: prevState.seconds + 1
				}));
				}

				componentDidMount() {
				this.interval = setInterval(() => this.tick(), 1000);
				}

				componentWillUnmount() {
				clearInterval(this.interval);
				}

				render() {
				return (
					<div>
					Seconds: {this.state.seconds}
					</div>
				);
				}
				}

				ReactDOM.render(<Timer />, document.getElementById('timer'));


				function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}


const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
const title = "title"
const element = (
  <h1>
    Hello, {formatName(user)}!
	{getGreeting(user)}
	{title}
  </h1>
);



ReactDOM.render(
  element,
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('time')
  );
}

setInterval(tick, 1000);
    </script>
</body>
</html>